<script>
export default {
  name: 'DzSolutionItem',
  props: {
    text: {
      type: Object,
      default: () => {
        return {};
      },
    },
    baseFeature: {
      type: Array,
      default: () => {
        return [];
      },
    },
    specailFeature: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>

<template>
  <div class="zdzq-section-left">
    <p class="zdzq-solution-desc">
      <span class="black">场景：</span>
      <span>{{ text.txt1 || '' }}</span>
    </p>
    <p class="zdzq-solution-desc">
      <span class="black">适用对象：</span>
      <span>{{ text.txt2 || '' }}</span>
    </p>
    <p class="zdzq-solution-desc">
      <span class="black">扩展：</span>
      <span>{{ text.txt3 || '' }}</span>
    </p>
    <h3 v-if="baseFeature.length" class="zdzq-solution__title">基础功能</h3>
    <div v-if="baseFeature.length" class="zdzq-solution__line"></div>
    <div class="zdzq-solution-item">
      <div v-for="(item, index) in baseFeature" :key="index" class="zdzq-item__content">
        <div class="zdzq-content-center">
          <img :src="item.img" alt="image" />
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
    <h3 v-if="specailFeature.length" class="zdzq-solution__title">特色功能</h3>
    <div v-if="specailFeature.length" class="zdzq-solution__line"></div>
    <div class="zdzq-solution-item">
      <div v-for="(item, index) in specailFeature" :key="index" class="zdzq-item__content">
        <div class="zdzq-content-center">
          <img :src="item.img" alt="image" />
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
